<template>
  <div class="login">
    <div id="black">
      <div class="center_login">
        <div class="main_img">
          <i style="margin-bottom:20px;">
            <img src="@/assets/img/logo.png" alt />
          </i>
          <span class="d-center">公路工程建设项目</span>
          <span class="d-center">管理系统</span>
        </div>
        <div class="main_login">
          <section id="login_form">
            <form>
              <h3>欢迎登录</h3>
              <span>请使用本人的账号密码登录</span>
              <div class="userdata">
                <i>
                  <img src="@/assets/img/ic_user.png" alt />
                </i>
                <input type="text" v-model="account" placeholder="请输入用戶名" />
                <i
                  @click.stop="account = null"
                  v-if="account != '' && account != null && account != 'null'"
                >
                  <img src="@/assets/img/ic_delete.png" alt />
                </i>
              </div>
              <div class="userdata">
                <i>
                  <img src="@/assets/img/ic_password.png" alt />
                </i>
                <input id="password" type="password" placeholder="请输入密码" v-model="password" />
                <i
                  @click="passwordHide = !passwordHide"
                  v-if="password != '' && password != null && password != 'null'"
                >
                  <img v-if="passwordHide" src="@/assets/img/eye_close.png" alt />
                  <img v-else src="@/assets/img/eye_open.png" alt />
                </i>
              </div>
              <div class="forget_password">
                <p @click.stop="remPassword=!remPassword">
                  <i>
                    <img src="@/assets/img/radiuo.png" v-if="!remPassword" alt />
                    <img src="@/assets/img/radiuo_slected.png" v-else alt />
                  </i>
                  记住密码
                </p>
                <span @click="dialog">忘记密码？</span>
              </div>
              <div class="login_button" @click.prevent="loginFormSubmit">
                <!-- <span @click="loginFormSubmit">{{requesting?'登陆中':'登录'}}</span> -->
                <input class="submitBtn" type="submit" :value="requesting?'登录中':'登录'" />
              </div>

              <!-- <h4 style="cursor: pointer;">还没有账号？免费注册</h4> -->
            </form>
          </section>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data: function() {
    return {
      checked: false,
      account: "",
      password: "",
      passwordHide: true,
      remPassword: false,
      requesting: false
    };
  },
  methods: {
    loginFormSubmit() {
      if(this.requesting) return
      this.requesting = true;
      this.$http
        .post(this.$updata + "/api/auth/login", {
          account: this.account,
          password: this.password
        })
        .then(res => {
          if (res.data.code == 200) {
            let resultData = res.data.data;
            let systemMenu = {};
            res.data.data.menu.map(v => {
              systemMenu[v.name] = v.id;
            });
            window.localStorage.systemMenu = JSON.stringify(systemMenu);
            for (let key in resultData) {
              if (key != "menu") window.localStorage[key] = resultData[key];
            }
            if (this.remPassword) {
              window.localStorage.username1 = this.account;
              window.localStorage.password1 = this.password;
            } else {
              window.localStorage.username1 = "";
              window.localStorage.password1 = "";
            }
            window.localStorage.remPassword = this.remPassword;
            axios.defaults.headers.token = res.data.data.token;
            this.$message({
              message: res.data.msg,
              type: "success"
            });
            setTimeout(() => {
              this.$router.push({ name: "home", params: { code: "login" } });
              this.requesting = false;
            }, 1000);
          } else {
            this.requesting = false;
            this.$message({
              message: res.data.msg,
              type: "error"
            });
          }
        });
    },
    dialog() {
      this.$message({
        title: "警告",
        message: "请联系管理员",
        type: "warning",
        duration: 3000
      });
    },
    keyDown(e) {
      //如果是回车则执行登录方法
      if (e.keyCode == 13) {
        //需要执行的方法
        if (this.requesting) return;
        this.loginFormSubmit();
      }
    }
  },
  watch: {
    passwordHide(news) {
      if (!news) {
        document.getElementById("password").type = "text";
      } else {
        document.getElementById("password").type = "password";
      }
    }
  },
  mounted() {
    this.remPassword =
      JSON.parse(window.localStorage.getItem("remPassword")) || false;

    if (this.remPassword) {
      this.account = window.localStorage.username1;
      this.password = window.localStorage.password1;
    }
    window.addEventListener("keydown", this.keyDown);
  },
  destroyed() {
    window.removeEventListener("keydown", this.keyDown, false);
  }
};
</script>
<style scoped lang = 'less'>
#black {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("../../assets/img/login-bg.jpg") no-repeat 100% 100%;
}
.center_login {
  width: 658px;
  height: 400px;
  background: rgba(255, 255, 255, 1);
  position: fixed;
  top: calc(50% - 200px);
  left: calc(50% - 329px);
  display: flex;
  justify-content: center;
  border-radius: 10px;

  .main_img {
    width: 240px;
    height: 400px;
    background: url("../../assets/img/login-bg-left.png") no-repeat 100% 100%;
    background-color: #2d91ff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 10px 0 0 10px;
    /* flex-wrap: wrap; */

    i {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    span {
      font-size: 24px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: rgba(254, 254, 254, 1);
      line-height: 30px;
      text-shadow: 0px 0px 2px rgba(0, 73, 0, 0.35);
    }
  }

  .main_login {
    width: 418px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    #login_form {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-start;

      h3 {
        font-size: 24px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(0, 123, 255, 1);
      }

      h4 {
        width: 354px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(49, 91, 233, 1);
        margin-top: 15px;
      }

      span {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        line-height: 2em;
      }

      .userdata {
        width: 354px;
        height: 48px;
        background: rgba(204, 204, 204, 0.2);
        margin-top: 19px;
        display: flex;
        justify-content: flex-start;
        align-self: center;

        i {
          width: 53px;
          height: 48px;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-shrink: 0;

          &:first-child {
            background: rgba(224, 223, 230, 0.4);
          }

          &:last-child {
            cursor: pointer;
          }

          img {
            width: 23px;
            height: 23px;
          }
        }

        input {
          width: 248px;
          border: transparent;
          font-size: 18px;
          font-weight: 400;
          color: rgba(0, 0, 0, 1);
          padding-left: 8px;
          background: transparent;

          &::-webkit-input-placeholder {
            font-size: 18px;
            font-weight: 400;
            color: rgba(194, 194, 194, 1);
          }

          input::-moz-input-placeholder {
            font-size: 18px;
            font-weight: 400;
            color: rgba(194, 194, 194, 1);
          }

          input::-ms-input-placeholder {
            font-size: 18px;
            font-weight: 400;
            color: rgba(194, 194, 194, 1);
          }
        }
      }

      .forget_password {
        width: 354px;
        margin-top: 19px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        p {
          display: flex;
          justify-content: space-around;
          align-items: center;
          cursor: pointer;

          i {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 9px;

            img {
              width: 16px;
              height: 16px;
            }
          }
        }

        span {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(0, 123, 255, 1);
          cursor: pointer;
        }
      }

      .login_button {
        margin-top: 19px;
        width: 354px;
        display: flex;
        justify-content: center;
        align-items: center;
        .submitBtn {
          width: 298px;
          height: 42px;
          background: #315be9;
          border-radius: 21px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 18px;
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
          cursor: pointer;
          border: 0;
        }
      }
    }
  }
}
</style>
